export const addNewsList = (editor, opts) => {
  const { Components } = editor;
  const { id, label } = opts;

  const newsListPfx = opts.classPrefix;
  const idContainer = `${id}-container`;
  const idNewsItem = `${id}-news-item`;
  const idNewsLink = `${id}-news-link`;
  const idNewsDate = `${id}-news-date`;

  Components.addType(id, {
    model: {
      defaults: {
        droppable: false,
        name: label,
        attributes: { class: newsListPfx },
        components: { type: idContainer },
        styles:
          (opts.style ||
            `
          .${newsListPfx} {
            padding: 0;
            margin: 0;
            width:100%;
          }

          .${newsListPfx}-container {
            display: flex;
            flex-direction: column;
            list-style-type: square;
          }

          .${newsListPfx}-item {
            border-bottom: 1px dotted #000;
            padding: 10px 0;
          }

          .${newsListPfx}-link {
            color: inherit;
            text-decoration: none;
            float:left;
          }

          .${newsListPfx}-date {
            white-space: nowrap;
            margin: 0 10px;
            float:right;
          }
        `) + opts.styleAdditional,
      },
    },
  });

  Components.addType(idContainer, {
    model: {
      defaults: {
        attributes: { class: `${newsListPfx}-container`, 'data-gjs': 'news-list' },
        name: 'News List Container',
        droppable: false,
        draggable: false,
        removable: false,
        copyable: false,
        highlightable: false,
        tagName:'ul',
        components: [
          { type: idNewsItem, components: [
              { type: idNewsLink, components: '1文章标题(这里输出的是文章标题)' },
              { type: idNewsDate, components: '2024-06-27' },
            ]
          },
          { type: idNewsItem, components: [
              { type: idNewsLink, components: '2文章标题(这里输出的是文章标题)' },
              { type: idNewsDate, components: '2024-06-27' },
            ]
          },
          // 可以根据需求添加更多的新闻项目
        ],
      },
    },
  });

  Components.addType(idNewsItem, {
    model: {
      defaults: {
        name: 'News Item',
        tagName:'li',
        attributes: { class: `${newsListPfx}-item` },
      },
    },
  });

  Components.addType(idNewsLink, {
    extend: 'link',
    model: {
      defaults: {
        name: 'News Link',
        draggable: `[data-gjs-type="${idContainer}"]`,
        attributes: { class: `${newsListPfx}-link` },
      },
    },
  });

  Components.addType(idNewsDate, {
    model: {
      defaults: {
        name: 'News Date',
        attributes: { class: `${newsListPfx}-date` },
        droppable: false,
        draggable: false,
        copyable: false,
        highlightable: false,
      },
    },
  });
};
